<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章管理',active='setting'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">用户管理</h4>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                            新增
                        </button>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th width="10%">名称</th>
                                <th>邮箱</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <th:block th:each="user : ${users.list}">
                                <tr th:id="${user.id}">
                                    <td>
                                        <a
                                           th:text="${user.username}"></a>
                                    </td>
                                    <td>
                                        <a th:text="${user.email}"></a>
                                    </td>
                                    <td>
                                        <a th:text="${user.created}"></a>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
                                            编辑
                                        </button>

                                        <a href="javascript:void(0)" th:onclick="'delUser('+${user.id}+');'"
                                           class="btn btn-warning btn-sm waves-effect waves-light m-b-5" >
                                            <i class="fa fa-rocket"></i> <span>删除</span></a>
                                    </td>
                                </tr>
                            </th:block>

                            </tbody>
                        </table>
                        <div th:replace="comm/paging :: pageAdminNav(${users})"></div>
                    </div>
                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>


        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">新增用户</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="username">用户名称</label>
                                <input type="text" class="form-control" id="username" placeholder="请输入分类名称">
                            </div>
                            <div class="form-group">
                                <label for="email">用户邮箱</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入分类数量">
                            </div>
                            <div class="form-group">
                                <label for="password">用户密码</label>
                                <input type="password" class="form-control" id="password" placeholder="请输入分类数量">
                            </div>
                            <div class="form-group">
                                <label for="valid">是否有效</label>
                                <input type="number" class="form-control" id="valid"  value="1" placeholder="请输入分类数量">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="saveChangesBtn">保存</button>
                    </div>
                </div>
            </div>
        </div>



        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">编辑用户</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <h1 th:text="category"></h1>
                                <label for="username">用户名称</label>
                                <input type="text" class="form-control" id="editname" placeholder="请输入分类名称"
                                >
                            </div>
                            <div class="form-group">
                                <label for="email">用户邮箱</label>
                                <input type="email" class="form-control" id="eidtemail" placeholder="请输入分类数量">
                            </div>
                            <div class="form-group">
                                <label for="password">用户密码</label>
                                <input type="password" class="form-control" id="editpassword" placeholder="请输入分类数量">
                            </div>
                            <div class="form-group">
                                <label for="valid">是否有效</label>
                                <input type="number" class="form-control" id="editvalid"  value="1" placeholder="请输入分类数量">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="updateChangesBtn">保存</button>
                    </div>
                </div>
            </div>
        </div>







    </div>
</div>
<div th:replace="back/footer :: footer"></div>
<script type="text/javascript">
    cosloe.log(user)
    function delUser(id) {
        // 获取<meta>标签中封装的_csrf信息
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        if(confirm('确定删除该用户吗?')){
            $.ajax({
                type:'post',
                url : '/admin/user/delete',
                data: {id:id},
                dataType: 'json',
                beforeSend : function(xhr) {
                    xhr.setRequestHeader(header, token);
                },
                success: function (result) {
                    if (result && result.success) {
                        window.alert("用户删除成功");
                        window.location.reload();
                    } else {
                        window.alert(result.msg || '用户删除失败')
                    }
                }
            });
        }
    }

    $(document).on('show.bs.modal', '#editModal', function (event) {
        var categoryId = button.data('id'); // 提取数据

        // 从后端获取要编辑的数据，并填充到 modal 中的表单元素中
        $.ajax({
            url: '/get-category/' + categoryId,
            type: 'GET',
            success: function (data) {
                $('#nameInput').val(data.name);
                $('#numInput').val(data.num);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    });


    $('#saveChangesBtn').click(function() {
        var username = $('#username').val();
        var password = $('#password').val();
        var email = $('#email').val();


        // 通过 AJAX 将表单数据提交给后端
        $.ajax({
            url: '/save-category',
            type: 'POST',
            data: {
                username: username,
                password: password,
                email:email
            },
            success: function(response) {
                // 如果保存成功，则刷新页面
                location.reload();
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });
    $('#updateChangesBtn').click(function() {
        var username = $('#username').val();
        var password = $('#password').val();
        var email = $('#email').val();


        // 通过 AJAX 将表单数据提交给后端
        $.ajax({
            url: '/save-category',
            type: 'POST',
            data: {
                username: username,
                password: password,
                email:email
            },
            success: function(response) {
                // 如果保存成功，则刷新页面
                location.reload();
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });




</script>
</body>
</html>